<template>
  <div class="news-page">
    <top-header :title="'最新资讯'" />
    <div class="news-card">
      <van-panel v-show="news_list.length !== 0"
                 :title="item.title"
                 :status="item.created_at_str"
                 v-for="item of news_list"
                 :key="item.id"
                 @click="goDetails(item.id)">
        <div class="font-size-12 html"
             v-html="item.intro"></div>
      </van-panel>
      <default v-show="news_list.length === 0"
               :img="require('@/assets/image/xunxi@3x.png')"
               text="暂无资讯"></default>
    </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import Default from '@/components/Default';
import cookie from '@/utils/cookie';
export default {
	name: 'index',
	components: {
		TopHeader,
		Default,
	},
	data() {
		return {
			news_list: [], //资讯列表
		};
	},
	mounted() {
		this.getNewsList();
	},
	methods: {
		getNewsList() {
			//获取资讯列表
			_api
				.api_userPortal_sysNews_getListByCon({
					town_id: cookie.get('town_id'),
				})
				.then((res) => {
					this.news_list = res.data.data;
					console.log(this.news_list);
				})
				.catch((error) => {
					console.log(error);
				});
		},
		goDetails(id) {
			//去往资讯详情
			this.$router.push({ path: '/NewsDetails', query: { detail_id: id } });
		},
	},
};
</script>

<style lang="scss">
.news-page {
	background: #f6f6f6;
	height: 100vh;
}
.news-card {
	width: 9.323671rem;
	border-top: 0.024155rem solid #e8e8e8;
	padding: 0 0.338164rem 0 0.338164rem;

	.van-cell-group {
		margin-top: 0.338164rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 0.144928rem;

		.van-panel__header {
			width: 8.937198rem;
			padding: 0.289855rem 0.193237rem;
			border-bottom: 0.02667rem solid #ebedf0;

			.van-cell__title {
				font-size: 0.386473rem;
				color: #333333;
			}
			.van-panel__header-value {
				font-size: 0.289855rem;
				color: #333333;
			}
		}

		.van-panel__header::after {
			border: 0;
		}

		.van-panel__content {
			width: 8.357488rem;
			margin: 0.289855rem 0.483092rem;
			color: #a8a8a8;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
	}

	.custom-image {
		padding-top: 35%;

		::v-deep .van-empty__image {
			width: 7.077295rem;
			height: 5.2657rem;
		}
	}
}
.html {
	img {
		width: 100%;
	}
	p {
		margin: 0;
		font-size: 12pt;
	}
}
</style>
